@swiper-height  : 207Px;
@mainMenu-height: 177Px;

* {
    box-sizing: border-box;
}

.container {
    // background-color: burlywood;
    // display         : flex;
    // flex-flow       : column nowrap;
    // justify-content : space-around;
    // align-items     : center;
    width              : 100%;

    // height: 100vh;
}

.swiper {
    height: @swiper-height;
    width : 100%;
}

.swiperItemImg {
    width : 100%;
    height: 100%;
}

.mainMenu {
    height  : @mainMenu-height;
    position: relative;

    .mainMenuImage {
        width : 100%;
        height: 100%;
    }

    .mainMenuItemContainer {
        position : absolute;
        height   : @mainMenu-height;
        left     : 0;
        top      : 0;
        display  : flex;
        flex-flow: row wrap;

        // background: yellowgreen;
        .mainMenuItem {
            width  : 25%;
            opacity: 0;
            border : 1px solid red;
        }
    }
}

.columnArea {
    .columnAreaTitle {
        width : 100%;
        height: 42Px;
    }

    .columnAreaFullPic {
        width: 100%;
    }
}

.ScrollViewItem {
    display: inline-block;
    margin: 0;
    .ScrollViewItemImage {
        width: 118Px;
        height: 163Px;
        // border:1px solid red;
    }

    .ScrollViewItemTitle {
        width        : 100%;
        height       : 20Px;
        padding-right: 5Px;
        padding-left : 5Px;
        overflow     : hidden;
        font-size    : 12Px;
        line-height  : 20Px;
        text-align   : center;
        position: relative;
        top: -8Px;
        // border:1px solid red;
    }
}

.columnListContainer {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

.divToTwo {
    width: 47%;
    // margin-top为父容器宽度的2%，在这里也就是屏幕宽度的2%
    margin-top: 2%;
}


@divToThree  : 100% / 3;
.divToThree {
    width: @divToThree;
}